<template>
	<div class="container" style="padding-top: 0;">
		<van-cell-group class="my-info" v-if="TOKEN">
			<van-cell  to="/userinfo" class="base-info" center :border="false">
				<van-image class="avatar" slot="icon" round fit="cover"
					:src="userInfo.avatar||require('@/assets/avatar.png')" />
				<div class="name" slot="title">{{userInfo.nickname||userInfo.username||'未命名'}}</div>
				<van-button class="update-btn" size="small" round to="/userinfo">编辑资料</van-button>
			</van-cell>
			<van-grid class="data-info" :border="false" column-num="2">
				<van-grid-item class="data-info-item" islink to="/my_publish">
					<div slot="text" class="text-wrap">
						<div class="count">{{publish_num}}</div>
						<div class="text">头条</div>
					</div>
				</van-grid-item>
				<van-grid-item class="data-info-item">
					<div class="text-wrap" slot="text">
						<div class="count">{{liked_num}}</div>
						<div class="text">获赞</div>
					</div>
				</van-grid-item>
			</van-grid>
		</van-cell-group>

		<router-link class="not-login" v-else tag="div" to="/login">
			<div>
				<img class="mobile" src="~@/assets/phone.png">
			</div>
			<!-- <div class="text">登录 / 注册</div> -->
		</router-link>

		<van-grid class="nav-grid mb-4" :column-num="2">

			<van-grid-item class="nav-grid-item">

				<span class="iconfont icon-shoucang-copy"></span>
				<span>收藏</span>
			</van-grid-item>
			<van-grid-item class="nav-grid-item">
				<span class="iconfont icon-lishi-copy"></span>
				<span>历史</span>
			</van-grid-item>
		</van-grid>
		<van-cell title="修改密码" is-link to="/edit_password" />
		<van-cell title="联系我们" is-link to="/contact" />
		<van-cell class="mb-4" title="关于我们" is-link to="/" />
		<!--  退出登录这个按钮  登录了才显示 不登录的就该看不见  -->
		<van-cell v-if="TOKEN" class="logout-cell" title="退出登录" @click="logout" /> <!-- @click="logout" -->
	</div>
</template>

<script>
	import {
		// mapState,
		mapMutations
	} from 'vuex';
	function mapState(arr){
		let obj = {
			
		}
		arr.forEach(v=>{
			
			obj[v] = function(){
				return this.$store.state[v]
			}
		})
		return obj
	}
	  
	export default {
		name: "my",
		data() {
			return {}
		},
		computed: {
			...mapState(['userInfo', 'TOKEN', 'publish_num', 'liked_num']),
		},
		created() {

			// let userInfo = localStorage.getItem('userInfo');

			// if(userInfo){
			// 	userInfo = JSON.parse(userInfo)
			// }

			// console.log(userInfo);
			// this.userInfo = userInfo || {};

		},
		methods: {
			...mapMutations(['LOGOUT']),
			logout() {
				this.$dialog.confirm({
						title: '提示',
						message: '您确定要退出登录吗?',
					})
					.then(() => {
						this.LOGOUT()
					})
			}

		}


	}
</script>

<style scoped="scoped">
	/deep/.icon-shoucang-copy:before {
		font-size: 170%;
		color: #f30823;
	}

	/deep/.icon-lishi-copy:before {
		color: #f30823;
		font-size: 170%;
	}
</style>
<style lang="scss">
	.container {
		.my-info {
			background: url(../assets/tu.webp) repeat;
			background-size: cover;

			.base-info {
				box-sizing: border-box;
				height: 300px;
				background-color: unset;
				padding-top: 86px;
				padding-bottom: 62px;

				.avatar {
					box-sizing: border-box;
					width: 100px;
					height: 100px;
					border: 1px solid #fff;
					margin-right: 20px;
				}

				.name {
					font-size: 15px;
					color: #fff;
				}

				.update-btn {
					height: 48px;
					font-size: 12px;
					color: #666666;
				}
			}

			.data-info {
				.data-info-item {
					height: 120px;
					color: #fff;

					.text-wrap {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.count {
							font-size: 18px;
						}

						.text {
							font-size: 11px;
						}
					}
				}
			}

			.van-grid-item__content {
				background-color: unset;
			}
		}

		.not-login {
			height: 360px;
			background: url(../assets/tu.webp) repeat;
			background-size: cover;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.mobile {
				width: 120px;
				height: 120px;
			}

			.text {
				font-size: 14px;
				color: #fff;
			}
		}

		.nav-grid {
			.nav-grid-item {
				height: 150px;

				.iconfont {
					font-size: 22px;
					margin-bottom: 5px;
				}

				.icon-shoucang {
					color: #eb5253;
				}

				.icon-lishi {
					color: #ff9d1d;
				}

				.van-grid-item__text {
					font-size: 14px;
					color: #333333;
				}
			}
		}

		.logout-cell {
			text-align: center;
			color: black;
			background: url(../assets/tu.webp) repeat;
		}

		.mb-4 {
			margin-bottom: 4px;
		}
	}
</style>
